<template>
  <div>
    <el-button slot="append" icon="el-icon-search" @click="search"
      >添加角色</el-button
    >
    <el-table :data="lists">
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column type="expand">
        <template slot-scope="scope">
          <div class="box" v-if="scope.row.children.length > 0">
            <el-row v-for="(item, i) in scope.row.children" :key="i">
              <el-col :span="6"
                ><el-tag closable @close="bdel(scope.row,scope.row.id ,item.id  )" type="">
                  {{ item.authName }}
                </el-tag>
              </el-col>
              <el-col :span="18">
                <el-row v-for="(item1, i1) in item.children" :key="i1">
                  <el-col :span="6">
                    <el-tag closable @close="bdel(scope.row,scope.row.id ,item1.id)"  type="success">
                      {{ item1.authName }}
                    </el-tag>
                  </el-col>
                  <el-col
                    :span="18"
                    
                  >
                    <el-tag closable @close="bdel(scope.row,scope.row.id ,item2.id)" type="warning" v-for="item2 in item1.children"
                    :key="item2.id">
                      {{ item2.authName }}
                    </el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
          <div v-else>该角色暂无权限</div>
        </template>
      </el-table-column>
      <el-table-column label="角色" prop="roleName"></el-table-column>
      <el-table-column label="角色描述" prop="roleDesc"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <!-- 更新 -->
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            icon="el-icon-edit"
            circle
          >
          </el-button>
          <!-- 删除 -->
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.$index, scope.row)"
          >
          </el-button>
          <!-- 权限 -->
          <el-button
            size="mini"
            @click="sove(scope.$index, scope.row)"
            type="warning"
            icon="el-icon-star-off"
            circle
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 弹出 -->
    <el-dialog :title="flag" :visible.sync="dialogVisible" width="30%">
      <el-form
        ref="addForms"
        :model="addForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="角色名" prop="roleName">
          <el-input
            v-model="addForm.roleName"
            placeholder="请输入角色名"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="roleDesc">
          <el-input
            v-model="addForm.roleDesc"
            placeholder="请输入角色描述"
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="useradd">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出 -->
    <!-- 弹出 -->
    <el-dialog title="修改权限" :visible.sync="dialogVisibles" width="30%">
      <el-tree
        :data="rights"
        show-checkbox  
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :default-checked-keys="ids"
        :props="defaultProps"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取 消</el-button>
        <el-button type="primary" @click="rightss">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 弹出 -->
  </div>
</template>

<script>
import {
  roles,
  addrole,
  roleupdate,
  roledelete,
  rightupdate,
  rolegos,
  delroledelete
} from '@/http/api'
export default {
  name: '', //

  components: {}, //引入子
  data() {
    //数据
    return {
      lists: [],
      rights: [],
      ids: [],
      dialogVisible: false,
      dialogVisibles: false,
      flag: '角色添加',
      addForm: {
        roleName: '',
        roleDesc: ''
      },
      defaultProps: {
        children: 'children',
        label: 'authName'
      },

      id: 0,
      rules: {
        roleName: [
          { required: true, message: '角色名不能为空', trigger: 'blur' },
          {
            min: 3,
            max: 20,
            message: '角色名长度需要在3~20位之间',
            trigger: 'blur'
          }
        ],
        roleDesc: [
          { required: true, message: '角色描述不能为空', trigger: 'blur' },
          {
            min: 3,
            max: 20,
            message: '描述长度需要在3~20位之间',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created() {
    this.gets()
  }, //todo钩子函数 实例创建之前
  mounted() {}, //真实dom挂载之后，运行，这时可以访问dom元素
  methods: {
    //请求角色列表
    async gets() {
      const res = await roles()
      console.log(res)
      this.lists = res
    },
    //编辑框打开
    handleEdit(i, item) {
      console.log(item)
      this.dialogVisible = true
      this.flag = '角色编辑'
      this.addForm = { ...item }
      this.id = item.id
    },
    //删除
    handleDelete(i, item) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await roledelete(item.id)
          this.gets()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //赋权
    async sove(i, item) {
      this.ids = []
      this.dialogVisibles = true

      const res = await rolegos()
      this.id = item.id
      this.rights = res
      this.ges(item, this.ids)

      console.log(this.ids)
    },
    //递归求id
    ges(obj, ids) {
      if (!obj.children) {
        return ids.push(obj.id)
      }
      obj.children.forEach((item) => {
        this.ges(item, ids)
      })
    },
    async rightss() {
      let arr1 = this.$refs.tree.getHalfCheckedKeys()
      let arr2 = this.$refs.tree.getCheckedKeys()
      const res = await rightupdate(this.id, {
        rids: [...arr1, ...arr2].join(',')
      })

      this.dialogVisibles = false
      this.gets()
    },
    //添加编辑确认框
    useradd() {
      this.$refs.addForms.validate(async (valid) => {
        //如果不合法，保留在当前对话框
        if (!valid) return false
        if (this.flag == '角色添加') {
          const res = await addrole(this.addForm)
          console.log('添加的结果：', res)
        } else {
          const res = await roleupdate(this.id, this.addForm)
          console.log('添加的结果：', res)
        }

        //合法，则调用添加角色接口，将数据保存到后台数据库

        //隐藏对话框
        this.dialogVisible = false

        //更新角色列表
        this.gets()
      })
    },
    //添加框打开
    async bdel(row,id,ids) {
      const res=await delroledelete(id,ids)
    // this.gets()
    row.children=res
    },
    search() {
      this.flag="角色添加"
      this.addForm={
                roleDesc: '',
                roleName:''

      }
      this.dialogVisible = true
    } //添加事件
  }, //!事件函数
  computed: {}, //计算属性
  watch: {
    //监听属性
    a: {
      deep: true,
      immediate: true,
      handler(newval) {}
    }
  }
}
</script>
<style scoped lang='scss'>
.el-col {
  border-radius: 4px;
}

.box {
  padding: 10px 14px;
  & > .el-row {
    border-bottom: 1px solid #eee;
    padding: 16px 0;
  }
}

.el-col {
  border-radius: 4px;
}
.el-tag {
  margin: 6px 10px;
}
</style>
